<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 600px;
            border: 1px solid;
            margin: auto;
            position: relative;
            font-size: 0;
        }

        li {
            list-style: none;
        }

        ul,
        ol {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            position: absolute;
        }

        ul {

            justify-content: space-between;
            padding: 0 20px;
            top: calc(50% - 25px);
        }

        ul>li {
            width: 49px;
            height: 49px;
            background: url("../img/shutter_prevBtn.png");
        }

        ul>li:hover {
            background-position: 0 -49px;
        }

        ul>li:nth-child(2) {
            transform: rotate(180deg);
        }

        ol {
            top: 90%;
            justify-content: center;

        }

        ol>li {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 50%;
            margin-left: 10px;
        }

        ol>li:hover {
            background-color: #fff;
        }

        ol>li:first-child {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="../img/pug1.jpg" alt="">
        <!-- 左右按钮 -->
        <ul>
            <li></li>
            <li></li>
        </ul>
        <!-- 4个圆点 -->
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        const container = document.querySelector('.container'); // 包含块
        const img = document.querySelector('img'); // 显示的图
        const rightBtn = document.querySelectorAll('ul>li')[1]; // 右翻
        const leftBtn = document.querySelectorAll('ul>li')[0]; // 左翻
        const circles = document.querySelectorAll('ol>li'); // 圆点

        const arr = ['pug1.jpg', 'pug2.jpg', 'pug3.jpg', 'pug4.jpg'];

        let i = 0;
        // 正常滚
        function render() {
            i++;
            if (i > 3) {
                i = 0;
            }
            img.src = `../img/${arr[i]}`;
            circleStyle();
        }
        // 倒着滚
        function reverse() {
            i--;
            if (i < 0) {
                i = 3;
            }
            img.src = `../img/${arr[i]}`;
        }

        // 渲染圆
        function circleStyle() {
            for (let item of circles) { // item -> 每个 li
                item.style.backgroundColor = 'rgba(255, 255, 255, .4)';
            }
            circles[i].style.backgroundColor = 'red';
        }

        // 自己滚
        let timer = setInterval(render, 1000);

        // 移入
        container.onmouseenter = function () {
            clearInterval(timer);
        }

        // 移出
        container.onmouseleave = function () {
            timer = setInterval(render, 1000);
        }

        // 右翻
        rightBtn.onclick = function () {
            render();
            circleStyle();
        }

        // 左翻
        leftBtn.onclick = function () {
            reverse();
            circleStyle();
        }

        // 点击圆点
        for (let index = 0; index < circles.length; index++) { // index:下标
            circles[index].onclick = function () {
                // console.log(index);
                i = index - 1; // index 1 i 1
                render();
            }
        }
    </script>
</body>

</html>